<template>
  <view class="tarbar">
    <view class="tarbar-list" :style="{ 'background-color': tabBar.backgroundColor, color: tabBar.color }">
      <view class="tarbar-list-ul">
        <view class="tarbar-list-li" v-for="item in tabBar.list" :key="item.pagePath" @click="switchTab(item.pagePath)">
          <view class="tarbar-list-li-icon">
            <view v-if="item.badge" class="badge"> {{ Number(item.badge) > 99 ? 99 : item.badge }} </view>
            <image class="image-home" :src="path == item.pagePath ? item.selectedIconPath : item.iconPath" mode="scaleToFill"></image>
          </view>
          <view :style="{ color: path == item.pagePath ? tabBar.selectedColor : '' }" class="tarbar-list-li-name">{{ item.text }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    path: {
      type: String,
      default: '/pages/tabbar/home'
    }
  },

  data() {
    return {
      tabBar: {
        color: '#999',
        selectedColor: '#1B4350',
        backgroundColor: '#FFFFFF',
        list: [
          {
            pagePath: '/pages/tabbar/home',
            text: '首页',
            iconPath: '/static/navbar/icon-index.png',
            selectedIconPath: '/static/navbar/icon-index-active.png'
          },
          {
            pagePath: '/pages/tabbar/profile',
            text: '我的',
            iconPath: '/static/navbar/icon-profile.png',
            selectedIconPath: '/static/navbar/icon-profile-active.png',
            badge: 1
          }
        ]
      }
    }
  },

  methods: {
    switchTab(pagePath) {
      if (this.path === pagePath) return false
      uni.switchTab({ url: pagePath })
    }
  }
}
</script>

<style lang='scss'>
.tarbar {
  width: 100%;
  z-index: 98;
  position: fixed;
}

.tarbar-list {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 98rpx;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  overflow: hidden;
}

.tarbar-list-ul {
  display: flex;
  justify-content: space-around;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.tarbar-list-li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 100%;

  .tarbar-list-li-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50rpx;
    height: 50rpx;
    margin: 0 auto;

    .badge {
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
      top: 2rpx;
      right: -10rpx;
      transform: translate(50%, 0);
      background-color: red;
      height: 30rpx;
      line-height: 30rpx;
      min-width: 30rpx;
      border-radius: 15rpx;
      font-size: 24rpx;
      color: #fff;
      padding: 0 6rpx;
      box-sizing: border-box;
    }

    .image-home {
      width: 50rpx;
      height: 50rpx;
    }
  }

  .tarbar-list-li-name {
    width: 100%;
    text-align: center;
    line-height: 30rpx;
    font-size: 24rpx;
    height: 30rpx;
  }
}
</style>
